<template>
  <div>
        <div
      style="line-height: 40px; font-size: 22px; font-weight: 600; padding: 5px"
    >
      事件发生原因统计分析
    </div>
    <div class="layer">
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">事件类型:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">发生日期-起:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">发生日期-至:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">上报科室:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">上报日期-起:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">上报日期-至:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">事件等级:</div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-radio-group v-model="sex" style="margin-top:2px;" size="mini">
              <el-radio label="1">Ⅰ级</el-radio>
              <el-radio label="2">Ⅱ级</el-radio>
              <el-radio label="3">Ⅲ级</el-radio>
              <el-radio label="4">Ⅳ级</el-radio>
            </el-radio-group>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="grid-content bg-purple">事件状态:</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="value" placeholder="-空-" size="mini">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-light">
            <el-button type="primary" icon="el-icon-search" class="btn">搜索</el-button>
            <el-button type="primary" icon="el-icon-search" class="btn">打印</el-button>
          </div>
        </el-col>
      </el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>各类事件比例图</span>
        </div>
        <div class="text item">
          <div id="a" :style="{width:'100%', height: '220px'}"></div>
        </div>
      </el-card>
      <el-table :data="tableData" style="width:98%;margin:10px;">
        <el-table-column prop="date" label="类型" />
        <el-table-column prop="name" label="发生原因" />
        <el-table-column prop="date" label="次数" />
        <el-table-column prop="name" label="比例" />
      </el-table>

    </div>
  </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  data() {
    return {
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      sex: "",
    };
  },

  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      echarts.init(document.getElementById("a")).setOption({
        title: { text: "各类事件比例图" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ['40%', '70%'],
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.el-row {
  margin: 0px 10px 0 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.layer {
  margin: 10px 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #eeeeee;
  text-align: right;
  padding: 2px 10px;
  color: #555555;
  font-size: 12px;
}
.bg-purple-light {
  background: #f8f9fa;
}
.grid-content {
  height: 22px;
  border: 1px solid #dddddd;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/ .el-button {
  padding: 1px 10px;
  font-size: 8px;
  border-radius: 0;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
</style>